<template>
  <div class="center">
    <div style="margin-bottom: 20px;">
      <h2>{{msg}}</h2>
    </div>
    <div>
      <img :src="erImage" alt="未获取数据" style="width: 200px; height: 200px;" />
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      msg: '微信登录',
      qrcodeData: [],
      erImage: ''
    }
  },

  async created() {
    this.getQR()
  },

  methods: {
    async getQR() {
      axios.post(
        'http://192.168.0.113:8080/jeecg-boot/weixin/webcatApi',
        { type: 0 }
      ).then( async res => {
        this.qrcodeData = await res.data.result.data.qrcode;

        if(res.data.code == 200) {
          let arr = this.qrcodeData;

          // 将PNG数组转换为Base64数据URI
          const byteArray = new Uint8Array(arr);
          const binaryString = byteArray.reduce(
            (data, byte) => data + String.fromCharCode(byte),
            '',
          );
          const base64Data = btoa(binaryString);
          this.erImage = `data:image/png;base64,${base64Data}`;


        }
      }).catch(err => {
        console.log("请求失败！", err)
      })    

    },

  }
}
</script>

<style scoped>
  .center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    color: #455a64;
  }
</style>
